<template>
	<view class="wrapper dangJian">
		<div class="bfff posr">
			<image src="../../static/dangJian/dj5.png" mode="widthFix" class="posa title-icon"></image>
			<div class="f32 fbold mb5">党建动态</div>
			<div class="space-between fWrap">
				<image src="../../static/dangJian/dj1.png" mode="aspectFill" class="nav-box mt20" @click="open('./huoDong/huoDong')"></image>
				<image src="../../static/dangJian/dj2.png" mode="aspectFill" class="nav-box mt20" @click="open('./xueXi/xueXi')"></image>
				<image src="../../static/dangJian/dj3.png" mode="aspectFill" class="nav-box mt20" @click="open('./dangYuan/dangYuan')"></image>
				<div class="nav-box colum mt20">
					<image src="../../static/dangJian/dj4.png" mode="widthFix" class="more-icon"></image>
					<div class="f20 c999 mt20">更多功能，敬请期待~</div>
				</div>
			</div>
		</div>
		<div class="bfff posr mt40">
			<image src="../../static/dangJian/dj6.png" mode="widthFix" class="posa title-icon"></image>
			<div class="f32 fbold mb5">业务办理</div>
			<div class="list-box posr mt20 flex-start" v-for="(item,index) in 10"  @click="open('./liuCheng/liuCheng')">
				<div class="f28">党员社区报到</div>
				<div class="posa f20 cfff center">流程介绍</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.bfff {
		width: 670rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 119, 255, 0.1);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 26rpx 28rpx 38rpx;
		.list-box{
			width: 612rpx;
			height: 92rpx;
			background: #FFF5F5;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 0 24rpx;
			.posa{
				width: 132rpx;
				height: 36rpx;
				background: linear-gradient(180deg, #FF2020 0%, #FF8585 100%);
				border-radius: 0rpx 12rpx 0rpx 12rpx;
				top: 0;
				right: 0;
			}
		}
		.more-icon{
			width: 33.34rpx;
			height: 33.34rpx;
		}
		.nav-box{
			width: 300rpx;
			height: 156rpx;
			background: #F6F6F6;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			opacity: 1;
		}
		.title-icon{
			top: 0;
			right: 22rpx;
			width: 51rpx;
			height: 72.81rpx;
		}
	}

	.dangJian {
		padding: 40rpx;
	}
</style>